<template>
  <el-container class="main-container">
    <!-- 头部 -->
    <el-header class="main-header">
      <ul style="display: flex;">
        <li style="margin-right: 20px;">
          <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
            icon-color="#626AEF" title="导入数据前会清空已有数据，确认是否要导入数据?" @confirm="usestore.useimportData">
            <template #reference>
              <el-button class="btn-grad" :loading="usestore.loading" :icon="Edit">导入</el-button>
            </template>
          </el-popconfirm>
        </li>
        <li>
          <el-popconfirm width="220" confirm-button-text="OK" cancel-button-text="No, Thanks" icon="InfoFilled"
            icon-color="#626AEF" title="确认是否要导出数据?" @confirm="usestore.useioutData">
            <template #reference>
              <el-button class="btn-grad1" :loading="usestore.loading_out" :icon="Promotion">导出</el-button>
            </template>
          </el-popconfirm>
        </li>
        <li id="header_title">
          <h3>中国区原件扫描盘点</h3>
        </li>
        <li>
          <audio ref="audioPlayer" :src="usestore.audioSrc" :controls="false"></audio>
        </li>
      </ul>
    </el-header>
    <!-- 主体 -->
    <el-container class="main-main">
      <!-- 主体侧边栏 -->
      <el-aside class="main-aside">
        <el-form ref="form" @submit.native.prevent>
          <el-form-item label="编码" class="custom-form-item">
            <el-input v-model="usestore.scandata" :placeholder="usestore.hw == '' ? '请扫描货位' : '请扫描条码'"
              @keyup.enter="usestore.ScanEnter(audioPlayer)" autofocus></el-input>
          </el-form-item>
          <el-form-item label="货位:">
            <el-text class="mx-1" type="danger">{{usestore.hw}}</el-text>
          </el-form-item>
          <el-form-item label="总数量:">
            <el-text class="mx-1" type="danger">{{usestore.total}}</el-text>
          </el-form-item>
        </el-form>
       
      </el-aside>
      <!-- 主体未扫描和已扫描列表区 -->
      <el-main class="main-main-left" style="padding: 10px;">
        <!-- 未扫描列表 -->
        <el-main class="main-main-top">
          <div class="utitle" style="color: #FF7F50;font-size: 18px; font-weight: bold;">未扫描列表: {{ usestore.unscan }}
          </div>
          <el-table :data="usestore.ucantable" style="width: 100%">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="item" label="编码" />
            <el-table-column prop="sn" label="条码" width="210"/>
            <el-table-column prop="hw" label="库存货位" width="150"/>
            <el-table-column prop="qty" label="库存量" />
          </el-table>
        </el-main>
        <!-- 已扫描列表 -->
        <el-main class="main-main-bottom">
          <div class="stitle" style="color: #5F9EA0;font-size: 18px; font-weight: bold;">已扫描列表: {{ usestore.scaned }}
          </div>
          <el-table :data="usestore.scantable" style="width: 100%">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="item" label="编码" />
            <el-table-column prop="sn" label="条码" width="210" />
            <el-table-column prop="hw" label="库存货位" width="150"/>
            <el-table-column prop="qty" label="库存量" />
          </el-table>
        </el-main>
      </el-main>
      <!-- 主体右侧异常条码列表 -->
      <el-main class="main-main-right" style="padding: 10px;">
        <div class="stitle" style="color: #6495ED;font-size: 18px; font-weight: bold;">当前货位异常条码列表</div>
        <el-table :data="usestore.notInArraydata" style="width: 100%">
          <el-table-column type="index" label="序号" width="80" />
          <el-table-column prop="sn" label="条码" />
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Edit, Promotion } from '@element-plus/icons-vue'
import useCounterStore from '@/stores/scan';
const usestore = useCounterStore();
const audioPlayer = ref(); // 使用ref绑定audio标签，方便控制音频播放
</script>

<style scoped lang="scss">
.main-container {
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
    width: 100px;
    text-align: center;

    .el-button {
      width: 100%;
      height: 40px;
    }
  }

  .main-header {
    padding: 10px 0 10px 50px;
     background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);

    #header_title {
      width: 100%;
      color: #c3e7fa;
      font-size: 18px;
      font-weight: bold;
      margin: 0 auto;
      text-align: center;
    }
  }

  .main-main {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;

    .main-aside {
      height: 100%;
      padding: 20px;
      background-image: linear-gradient(to left top, #9c6bd1, #9479d9, #8d85df, #8890e3, #859be6, #869cec, #889df2, #8a9ef8, #9894ff, #ac87ff, #c576ff, #e05ffb);

      .el-form {
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;


      }

    }

    .main-main-left {
      flex: 3;
      display: flex;
      flex-direction: column;
    }

    .main-main-right {
      flex: 1;
      border-left: 1px solid #ccc;
    }
  }
}

/* 改变 el-form-item 的字体颜色 */
::v-deep .el-form-item__label,.el-text {
  color: #F0F8FF;
  font-size: 14px;
  font-weight: bold;
}

.btn-grad {
  background-image: linear-gradient(to right, #ff6e7f 0%, #bfe9ff 51%, #6eff9e 100%);
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 20px;
  display: block;
}

.btn-grad:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}


.btn-grad1 {
  background-image: linear-gradient(to right, #ad4667 0%, #5FC3E4 51%, #E55D87 100%);
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow: 0 0 20px #eee;
  border-radius: 20px;
  display: block;
}
.btn-grad1:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

</style>